<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		h1{
			text-align: center;
		}
		.box{
			width: 720px;
			margin:0 auto;
			margin-top:20px;
			img{
				width: 100%;
			}
		} 
		.slye{
			width: 720px;
			margin: 0 auto;
			display: flex;
			align-items:center;
			p{
				margin-right: 10px;
			}


			li{
				width: 64px;
				list-style: none;
				position: relative;
				margin: 0 10px;
			}
		}
		.show{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 300px;
			background: #191e25;
			color: #7e807d;
			padding: 20px;
			bottom:80px;
			border: 1px solid #b59758;
			z-index:99;
			display:none;

			h4{
				color: #b59758;
				border-bottom:2px solid #b59758;
				text-align: center;
				padding: 14px;
			}
			p{
				padding-top:10px;
				font-size: 14px;
			}
		}
		.sj{
			width: 30px;
			height: 30px;
			border: 1px solid #b59758;
			background-color: #191e25;
			position: absolute;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			z-index: -1;
			border-top-color: transparent;
			border-left-color: transparent;
			bottom: -15px;
		}
		.slye li:hover .show{
			display: block;
		}
		.slye ul{
			display: flex;
		}
	</style>
</head>
<body>

<h1>黑暗之女---安妮简介：</h1>
<div class="box">
<img src="">
</div>
<div class="slye">
	<p>技能描述</p>
	<ul>
		
	</ul>
</div>
<script type="text/javascript" src="./ajax.js"></script>
<script type="text/javascript">
	// url传来的参数
	console.log(location.search.split('=')[1])
	let id = location.search.split('=')[1]
	let h1 = document.querySelector('h1')
	let img = document.querySelector('.box img')
	let ul = document.querySelector('ul')
	ajax({
		method:'getOther',
		url:`https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js?ts=2734602`,
		success:function(res) {
			console.log(res)
			h1.innerText = `${res.hero.name}---${res.hero.title}简介`
				img.src = res.skins[0].mainImg
				for(let i = 0; i <res.spells.length;i++){
					ul.innerHTML += `
			 <li>
			<img src="${res.spells[i].abilityIconPath}">
			<div class="show">
				<h4>${res.spells[i].name}</h4>
				<p>${res.spells[i].description}</p>
				<div class="sj"></div>
			</div>
		</li> 
					`
				}
			
		}
	})
</script>

</body>
</html>